import React, {Component} from 'react'
import { observer, inject } from 'mobx-react'
import {getUserList} from './UserServ.js'
import { Table, Button, Switch, Modal, Form, Input } from 'antd'
import styles from './User.less'
import { runInAction } from 'mobx'

const FormItem = Form.Item

@inject('user')
@Form.create()
@observer
class UserList extends Component {
	constructor(props) {
		super(props)
		this.user = this.props.user
	}

	columns = [
		{
		  title: 'ID',
		  dataIndex: '_id',
		  key: '_id',
		}, {
		  title: '用户名',
		  dataIndex: 'username',
		  key: 'username',
		}, {
		  title: '密码',
		  dataIndex: 'password',
		  key: 'password',
		},{
			title: '管理员',
			render: (text, record, index) => {
				return (
					<Switch defaultChecked={record.isAdmin} onChange={(value) => {this.changeIsAdmin(record._id, value)}}/>
				)
			}
		},{
			title: '操作',
			render: (text, record, index) => {
				return (
					<div>
						<a onClick={() => {
							runInAction(() => {
								 this.user.username = record.username
								 this.user.password = record.password
								 this.user.isAdmin = record.isAdmin
								 this.user._id = record._id
								 this.user.status = 'edit'
								 this.user.visible = true
							})
						}}>编辑</a>
						<a style={{marginLeft: "10px"}} onClick={() => {this.user.doDeleteUser(record._id)}}>删除</a>
					</div>
				)
			}
		}
	]

	componentDidMount() {
		this.user.doGetUserList()
	}
	
	handleSubmit = () => {
		this.props.form.validateFields((err, values) => {
	    if (!err) {
	      	this.user.status === 'add' ? this.user.doAddUser() : this.user.doUpdateUser({_id: this.user._id, username: this.user.username,password: this.user.password})
	      	runInAction(() => {
	      		this.user.username = ''
	      		this.user.password = ''
	      		this.user.isAdmin = false
	      		this.user.visible = false
	      		this.user.status = 'add'
	      	})
	      }
	    })
	}


	changeIsAdmin = (_id, value) => {
		console.log(_id, value)
		this.user.doUpdateUser({
			_id,
			isAdmin: value
		})
	}

	render() {
		const { getFieldDecorator } = this.props.form

		const formItemLayout = {
	      labelCol: {
					span: 4
	      },
	      wrapperCol: {
	        span: 20
	      },
	    };

		return (
			<div className={styles.box} style={{backgroundColor: "#fff", padding: "30px"}}>
				<div className={styles.shadow}></div>
				<div className={styles.header}>
					<h3 className={styles.title}>用户列表</h3>
					<Button className={styles.addUser} type="primary" onClick={(e) => {
						runInAction(() => {
							this.user.visible = true
						})
					}}>新增用户</Button>
				</div>
				<Table rowKey='_id' bordered={true} columns={this.columns} dataSource={this.user.userList}></Table>
				<Modal
		          title="新增用户"
		          destroyOnClose={true}
		          visible={this.user.visible}
		          onOk={this.handleSubmit}
		          onCancel={() => {
		          	runInAction(() => {
						this.user.visible = !this.user.visible
						this.user.username = ''
			      		this.user.password = ''
			      		this.user.isAdmin = false
					})
		          }}
		        >
		          <Form>
		          	<FormItem {...formItemLayout} label="用户名">
				          {getFieldDecorator('username', {
				          	initialValue: this.user.username,
				            rules: [{ required: true, message: '请输入你的用户名!' }],
				          })(
				            <Input placeholder="用户名" onChange={(e) => {
				            	runInAction(() => {
				            		this.user.username = e.target.value
				            	})
				            }} />
				          )}
		        	</FormItem>
		        	<FormItem {...formItemLayout} label="密码">
				          {getFieldDecorator('password', {
				          	initialValue: this.user.password,
				            rules: [{ required: true, message: '请输入你的密码!' }],
				          })(
				            <Input placeholder="密码" onChange={(e) => {
				            	runInAction(() => {
				            		this.user.password = e.target.value
				            	})
				            }} />
				          )}
		        	</FormItem>
		          </Form>
		        </Modal>
			</div>
		)
	}
}

export default UserList